import React, { useState, useEffect } from 'react';
import { TreeSelect, Spin } from 'antd';
import { translateTreeData } from '@/utils/utils';
import { getOrganizationList } from '@/services/Organization/orgmanage';

// 这个组件尽量不用，可以使用行政机构组件
const CompanyNameIdInput = ({ value = [], onChange, disabled, ...rest }) => {
    const [treeData, setTreeData] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const fetchTreeData = async () => {
            setLoading(true);
            const { code, data } = await getOrganizationList({
                showTreeFlag: 1
            });
            if (code === 10000) {
                const tempData = translateTreeData(data, {
                    value: 'organizationCode',
                    title: 'organizationName'
                });
                setTreeData(tempData);
            }
            setLoading(false);
        };
        fetchTreeData();
    }, []);

    const handleOnChange = changeValue => {
        if (onChange) {
            onChange(changeValue);
        }
    };
    return (
        <Spin spinning={loading}>
            <TreeSelect
                allowClear
                disabled={disabled}
                value={value}
                treeData={treeData}
                treeCheckStrictly
                treeCheckable
                treeDefaultExpandAll
                searchPlaceholder="请选择公司"
                onChange={handleOnChange}
                getPopupContainer={trigger => trigger.parentNode}
                style={{
                    width: '100%'
                }}
                {...rest}
            />
        </Spin>
    );
};

export default CompanyNameIdInput;
